import './assets/main.css'
import './assets/mars3d.css'
import { createApp, nextTick } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import globalComponents from './components/index.js'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import App from './App.vue'
import router from './router'
import scrollDirective from '@/utils/autoScroll.js'
// mock的原生代码会导致mars3d获取地图瓦片数据出错无法加载地图
// import './mock'
const app = createApp(App)
app.use(globalComponents)
app.use(createPinia())
app.use(ElementPlus, { locale: zhCn })
app.use(router)
app.mount('#app')
/**
 * @returns 列表触底加载事件（滚动懒加载、无限滚动）命令行封装
 * el：指令绑定的元素。
 * binding：一个对象，包含指令的参数、表达式和修饰符等信息。其中，binding.value 是传递给指令的方法引用。
 * vnode：虚拟节点，Vue 在渲染过程中使用的描述 DOM 结构的抽象表示。
 */
app.directive('loadmore', {
  mounted(el, binding, vnode) {
    const elUI_selectWrap = el.querySelector('.el-scrollbar__wrap') || el //监听el-ui或者普通滚动条的滚动条
    elUI_selectWrap &&
      elUI_selectWrap.addEventListener('scroll', function () {
        let sign = 50
        const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
        if (scrollDistance <= sign) {
          binding.value()
        }
      })
  }
})
/**
 * @returns 列表自动滚动命令行封装
 */
app.directive(scrollDirective.name, scrollDirective)
